import React, { CSSProperties, useState } from 'react';
import { ConfigContext } from '../config-provider';
import { CSSTransition } from 'react-transition-group';
import classNames from 'classnames';
export type LoadingProps = {
  style?: CSSProperties;
  className?: string;
  text?: string;
  background?: string;
  open?: boolean;
  icon?: string;
  duration?: number;
  target?: string;
  cRef: React.RefObject<any>;
};

export default function LoadingEl(props: LoadingProps): JSX.Element {
  const {
    style,
    className,
    text,
    background,
    open,
    icon,
    duration,
    target,
    cRef,
  } = props;
  const [showLoading, setShowLoading] = React.useState();
  const { getPrefixCls } = React.useContext(ConfigContext);
  const prefixCls = getPrefixCls('loading');
  const loadingClass = classNames({
    [prefixCls]: true,
    [className || '']: !!className,
  });
  const loadingStyle = {
    ...style,
    background,
  };
  return (
    <CSSTransition in={true} timeout={300} classNames="loading" unmountOnExit>
      <div className={loadingClass} style={style || loadingStyle}>
        <div className="container_inner">
          {text && text !== '' ? <p>{text}</p> : null}
        </div>
      </div>
    </CSSTransition>
  );
}

LoadingEl.defaultProps = {};
